<template>
<div>
    <el-row>
        <el-col :span="10">
            <!-- 忠实粉丝列表 -->
            <el-select v-model="selectedFan" placeholder="请选择忠实粉丝">
                <el-option
                    v-for="fan in fans"
                    :key="fan.user_ID"
                    :label="fan.user_ID"
                    :value="fan.user_ID">
                </el-option>
            </el-select>
            <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="到"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="fetchFans"
            />
            <el-input-number
                v-model="threshold"
                :min="0"    
                label="阈值"
                @change="fetchFans"
            />
            <el-button type="primary" @click="fetchFanConsumption">查询</el-button>
        </el-col>

        <el-col :span="12">
            <el-table :data="data" style="width: 100%">
                <el-table-column prop="dish_name" label="菜品名称" />
                <el-table-column prop="purchase_count" label="购买次数" />
            </el-table>
        </el-col>
    </el-row>
</div>
</template>

<script>
import { ref, onMounted, computed } from 'vue';
import { useStore } from 'vuex';
import axios from '@/axios'
import { ElMessage, ElSelect, ElOption } from 'element-plus';

export default {
name: 'ConsumptionDistribution',
setup() {
    const store = useStore();
    const merchant_ID = computed(() => store.state.merchant.id);  // 从 Vuex store 中获取商户 ID
    const today = new Date(); // 获取今天的日期
    const dateRange = ref([new Date('2024-01-01'), today]); // 默认日期范围
    const threshold = ref(5);  // 默认阈值
    const data = ref([]);  // 存储消费分布数据
    const fans = ref([]); // 存储忠实粉丝的列表
    const selectedFan = ref(null); // 当前选中的忠实粉丝

    /* 获取忠实粉丝列表 */
    const fetchFans = async () => {
        try {
            const response = await axios.post('/api/merchant/getFans', {
                merchant_ID: merchant_ID.value,
                start_date: dateRange.value[0].toISOString().split('T')[0],
                end_date: dateRange.value[1].toISOString().split('T')[0],
                threshold: threshold.value,
            });
            fans.value = response.data;
        } catch (error) {
            ElMessage.error('获取忠实粉丝列表失败');
        }
    };

    const fetchFanConsumption = async () => {
        try {
            const response = await axios.post('/api/merchant/fan-consumption', {
                merchant_ID: merchant_ID.value,
                user_ID: selectedFan.value,
                start_date: dateRange.value[0].toISOString().split('T')[0],
                end_date: dateRange.value[1].toISOString().split('T')[0],
            });
            data.value = response.data;
        } catch (error) {
            ElMessage.error('获取消费分布数据失败');
        }
    };

    onMounted(() => {
        fetchFans();
    });

    return {
        dateRange,
        threshold,
        data,
        fans,
        selectedFan,
        fetchFans,
        fetchFanConsumption,
    };
},
};
</script>

<style scoped>
.el-select,
.el-date-picker,
.el-input-number {
margin-bottom: 20px;
}
</style>